<template>
  <div class="middle">
    <div class="list">
      <div class="list1"><div>全城▼</div></div>
      <div class="list1"><div>品牌▼</div></div>
      <div class="list1"><div class="list2">特色▼</div></div>
    </div>

    <ul>
      <li v-for="i in cinemas" :key="i.id">
        <div class="title">{{i.nm}}<span class="sp1">{{i.sellPrice}}</span><span class="sp2">元起</span></div>
        <div class="address">{{i.addr}}</div>
        <div class="labels">
          <span v-show="i.tag.allowRefund==1" class="s1">退</span>
          <span v-show="i.tag.endorse==1" class="s1">改签</span>
          <span v-show="i.tag.snack==1" class="s2">小吃</span>
          <span v-show="i.tag.viptag==1" class="s2">折扣卡</span>
          <span v-for="k in i.tag.hallType" class="s1">{{k}}</span>
        </div>
        <div class="card" v-show="i.promotion.cardPromotionTag!=''"><button class="btn">卡</button>{{i.promotion.cardPromotionTag}}</div>
      </li>
    </ul>
  </div>
</template>

<script>
//引入axios
import axios from "axios";
export default {
  name: "yingyuan",
  data(){
    return{
      cinemas: []//保存热映电影的数组的数据
    };
  },
  mounted() {
    //使用axios 获取数据
    axios.get("/ajax/moreCinemas?movieId=0&day=2021-12-09&offset=0&limit=20&districtId=-1&lineId=-1&hallType=-1&brandId=-1&serviceId=-1&areaId=-1&stationId=-1&item=&updateShowDay=true&reqId=1639032216145&cityId=30&optimus_uuid=15660AC0568911EC92A1852598A4297A6E4C5AEB7DCF4B5F93B93F696C92A920&optimus_risk_level=71&optimus_code=10").then(res=>{
      console.log(res.data.cinemas.cinemas);
      this.cinemas = res.data.cinemas.cinemas;
    });
  }
}
</script>

<style scoped>
.middle {
  width: 100%;
  margin-top: 200px;
  margin-bottom: 55px;
}
.middle .list{
  height: 40px;
  width: 100%;
  text-align: center;
  position: fixed;
  background: white;
  top: 156px;
}
.middle .list .list1{
  width: 112.5px;
  height: 100%;
  display: inline-block;
  font-size: 16px;
  line-height: 40px;
  border-bottom: 1px solid #f0f0f0;
}
.middle .list .list1 div{
  width: 100%;
  height: 30px;
  border-right: #f0f0f0 1px solid;
}
.middle .list .list1 .list2{
  border: none;
}
.middle {
  margin-top: 160px;
  margin-bottom: 47px;
}
.middle ul{
  margin-left: 20px;
}
.middle ul li{
  justify-content: space-around;
  height: 120px;
  display: flex;
  flex-direction: column;
  border-bottom: #e6e6e6 1px solid;
  padding: 10px 0;
}
.middle .labels span{
  background: white;
  padding: 2px;
  font-size: 12px;
  margin-right: 5px;
}
.middle .labels .s1{
  color: #579daf;
  border: 1px solid #579daf;
}
.middle .labels .s2{
  color: #ff9900;
  border: 1px solid #ff9900;
}
.middle .btn{
  background: #57c0f8;
  border: none;
  color: white;
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 17px;
}
.middle .title{
  font-size: 16px;
}
.middle .title .sp1{
  font-size: 18px;
  color: #f13d37;
}
.middle .title .sp2{
  font-size: 12px;
  color: #f13d37;
}
.middle .address{
  font-size: 13px ;
  color: #666666;
}
.middle .card{
  font-size: 12px;
  color: #a59999;
}
</style>